<!-- 点餐界面 -->
<template>
  <div class="menu-main">
      <!-- 这个list其实应该是整个页面的list，但是list不能嵌套，不然点餐页面的list就失效了，
      所以这里的list纯粹是看看，没实际用处，header标签也一样，没用处 -->
      <list>
          <header>
            <div class='menu-top'>
            <!-- <text @click="goto('Business')">{{go_back}} </text> -->
            <wxc-minibar :title="urldata.title"
                        background-color="#009ff0"
                        text-color="#FFFFFF"
                        right-text=""
                        @wxcMinibarLeftButtonClicked="goto('Business')"></wxc-minibar>
            </div>
        </header>
        <cell>
            <div class="headdiv">
                <div class="headbodytext">
                    <text class="bodytext headbodytitle">{{urldata.title}}</text>
                    <text class="bodytext headbodyscore">{{urldata.score}}</text>
                    <text class="bodytext headbodydeliveryTime">配送时间{{ urldata.deliveryTime }}</text>
                    <text class="bodytext">月售{{ urldata.monthSale }}</text>
                </div>
                <div class="headbodyimg">
                    <image class="img-size" :src="urldata.icon"></image>
                </div>
            </div>
        </cell>
        <cell>
            <slider class="sliders size" auto-play="true" interval="8000">
                <div v-for="src in advertisementImgs" :key="src">
                    <image class="image size" :src="src"></image>
                </div>
            </slider>
        </cell>
    <header class='header2'>
    <div class='optionList'>
        <div class='optionConten'>
            <text :class="[optionState1?'option':'optionBig']" @click="goto('Order')">点餐</text>
            <div :class="[optionState1?'optionbj':'optionbjBig']"></div>
        </div>
      <div class='optionConten'>
          <text :class="[optionState2?'option':'optionBig']" @click="goto('Introduce')">评价</text>
          <div :class="[optionState2?'optionbj':'optionbjBig']"></div>
      </div>
      <div class='optionConten'>
          <text :class="[optionState3?'option':'optionBig']" @click="goto('Evaluate')">商家</text>
          <div :class="[optionState3?'optionbj':'optionbjBig']"></div>
      </div>
    </div>
    </header>
    </list>
        <div style="margin-top:10px;">
            <router-view></router-view>
        </div>
  </div>
</template>

<script>
import Config from "../datas/business_config.js";

import { WxcMinibar } from 'weex-ui';

export default {
  data: () => ({
    // go_back: "返回",
    advertisementImgs: Config.advertisementImg,
    urldata: {},
    optionState1: false,
    optionState2: true,
    optionState3: true
  }),
  components: { WxcMinibar },
  mounted() {
      this.urldata = this.$route.params;
      this.goto('Order');
  },
  methods: {
    goto(path, e = {}) {
        const self = this;
        if(path=='Order'){
            e = this.$route.params;
            self.optionState1 = false;
            self.optionState2 = true;
            self.optionState3 = true;
        }
        if(path=='Introduce'){
            self.optionState1 = true;
            self.optionState2 = false;
            self.optionState3 = true;
        }
        if(path=='Evaluate'){
            self.optionState1 = true;
            self.optionState2 = true;
            self.optionState3 = false;
        }
      self.$router.push({ name: path, params: e });
    },
  },
};
</script>

<style scoped>
.menu-main {
  width: 750px;
  /* height: 1000px; */
  /* position: absolute; */
}

.headdiv {
  flex-direction: row;
  margin: 10px 10px;
  width: 720px;
  justify-content: center;
  border-style: solid;
  border-width: 1px;
  border-color: #ffffff;
  border-radius: 30px;
  /* border-color: #F5F5F5; */
  background-color: rgba(245, 245, 245, 0.5);
}

.headbodytext {
  flex-direction: row;
  flex-wrap: wrap;
  width: 450px;
  margin-top: 20px;
}

.bodytext {
  height: 60px;
  font-size: 27px;
  color: #808080;
  margin-right: 20px;
}

.headbodytitle {
  font-size: 35px;
  font-weight: bold;
  color: black;
}

.img-size {
  margin-top: 20px;
  width: 100px;
  height: 100px;
}

.sliders {
  width: 720px;
  margin: 0px 15px;
}

.size {
  width: 720px;
  height: 400px;
  border-radius: 20px;
}

.menu-top {
    /* position: sticky; */
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}

.menu-top .wxc-minibar{
    height:50px;
}

.optionList {
    position: sticky;
    width: 320px;
    margin: 20px 10px;
    flex-direction: row;
    justify-content: space-around;
}

.optionBig {
    height: 55px;
    font-size: 35px;
    font-weight: bold;
}

.option {
    height: 55px;
    color: #808080;
    font-size: 28px;
}

.optionbj{
    display:none;
}

.optionbjBig{
    height: 3px;
    width: 50px;
    /* color: #009ff0; */
    border-top-width: 6px;
    border-top-color: #009ff0;
    border-top-style: solid;
}

.optionConten {
    justify-content: center;
    align-items: center;
}

.header2 {
    /* top:50px; */
    background-color: #ffffff;
}

</style>
